.loginWrap {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#DEF3F4;
    z-index: 99;
}
.backgroundBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(./images/bg.jpg);
    background-size: 100% 100%;
    transition: all .5s;
}
.container {
    position: relative;
    width: 240px;
    height: 300px;
    padding: 100px 40px 40px 40px;
    box-sizing: content-box;
}

.loginWrap .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 90px 40px 40px 40px;
    backface-visibility: hidden;
    background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
    box-shadow: -15px 15px 15px rgba(0,0,0,.4);
    transition: all 1s;
}
.loginWrap .showBox {
    transform:rotateY(0deg);
}
.loginWrap .hiddenBox {
    transform:rotateY(180deg);
}
.loginNotification {
    background: transparent;
    border: 1px solid #D3D7F7;
    color: #D3D7F7;
    width: 250px;
    height: 80px;
    float: right;
    margin-right: 20px;
}
.loginNotification :global(.ant-notification-notice-message) {
    color: #D3D7F7;
}
.loginNotification :global(.ant-notification-notice-close) {
    color: #D3D7F7;
}
/*更改谷歌浏览器input背景*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /*延迟背景颜色载入*/
    -webkit-transition-delay: 99999s;
    transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    transition: color 99999s ease-out, background-color 99999s ease-out;
}